<template>
  <div>
  <basic-container-one>
    <vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
    <el-form :inline="true">
      <div style="margin-top: 22px">
        <el-form-item>
          <el-input clearable v-model="formInline.gameName" placeholder="游戏名称"/>
        </el-form-item>
        <el-form-item>
          <el-input clearable v-model="formInline.userAccount" placeholder="玩家账号"/>
        </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
            <el-button icon="el-icon-download" type="primary" @click="handleExport">导出Excel</el-button>
          </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="syncData">手动同步</el-button>
        </el-form-item>
        <el-form-item>
          <div>下次自动同步时间：{{syncTime}}</div>
        </el-form-item>
      </div>
    </el-form>
  </basic-container-one>
    <basic-container>

    <el-row>
      <el-col :span="24">
        <template>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
              prop="userAccount"
              label="账号" key="1">
            </el-table-column>
            <el-table-column
              prop="gameName"
              label="游戏" key="2">
              <template slot-scope="scope">
                <span v-if="scope.row.gameName!=''"><span
                  class="skucost-pruice">{{ scope.row.gameName.substring(0, scope.row.gameName.length - 1)}}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="payTime"
              label="加币时间">
              <template slot-scope="scope">
                <span v-if="scope.row.payTime!=''"><span
                  class="skucost-pruice">{{ scope.row.payTime  | formatDate('YYYY-MM-DD HH:mm:ss') }}</span></span>
              </template>
            </el-table-column>

            <el-table-column
              prop="platformCurrencyBalance"
              label="剩余币数">
            </el-table-column>

            <el-table-column
              prop="diffTime"
              label="回收剩余天数">
            </el-table-column>

            <el-table-column label="回收" v-if="this.isShowEdit">
              <template slot-scope="scope">
                <el-button v-if="scope.row.recoveryType == 0" @click="recovery(scope.row)"  type="text" size="medium">退币</el-button>

                <span v-if="scope.row.recoveryType == 1"><span class="skucost-pruice">退币中</span></span>
                <span v-if="scope.row.recoveryType == 2"><span class="skucost-pruice">退币失败</span></span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10,20, 50, 100, 200]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </el-col>
    </el-row>

  </basic-container>
  </div>
</template>

<style>
.input-with-select .el-input-group__prepend {
  background-color: #fff;
  width: 100px;
}
</style>

<script>

import {pageQrPlayer,getSyncTime, initSyncData, recoveryBalance} from "@/api/system/details";
import VueElementLoading from 'vue-element-loading';
import {cloneObj, parseParam} from "@/util/util";
import {getToken} from "@/util/auth";
import {mapGetters} from "vuex";
import {remove} from "@/api/system/client";
export default {
  data() {
    return {
      isShowEdit:true,
      syncTime:'',
      seconds:0,
      isshowtrue:false,
      mode:'',
      isActive: false,
      leading:true,
      input:'',
      row:{},
      page: {
        currentPage: 1,
        pageSize: 20,
        total: '',
      },
      formInline: {
        gameName:'',
        userAccount: '',
      },
      tableData:[]
    };

  },
  components: {
    VueElementLoading
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    if(this.userInfo.account != 'test999') {
      this.isShowEdit = false
    }
    this.onload();
    this.loadSyncTime();
  },
  methods: {
    recovery(item) {
      if(item.platformCurrencyBalance <= 0) {
        this.$message({
          message: "无币可退",
          type: 'error'
        });
        return;
      }
      this.$confirm("确定将剩余"+item.platformCurrencyBalance+"币数退掉?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {

        })
        .then(() => {
          //alert(item.id + "," + item.userAccount + ","+ item.platformCurrencyBalance)
          /*item.userAccount = 'luck888'
          item.platformCurrencyBalance = 1*/
          recoveryBalance(item).then(res => {
            if(res.data.success == true) {
              this.$message({
                message: res.data.msg,
                type: 'success'
              });
              this.onload();
            } else {
              this.$message({
                message: res.data.msg,
                type: 'error'
              });
            }
          });
        });
    },
    countDown() {
      let h = parseInt(this.seconds / 60 / 60);
      h = h < 10 ? "0" + h : h
      let m = parseInt(this.seconds / 60 % 60);
      m = m < 10 ? "0" + m : m
      let s = parseInt(this.seconds % 60);
      s = s < 10 ? "0" + s : s
      this.syncTime = h + '时' + m + '分' + s + '秒'
    },
    //定时器没过1秒参数减1
    Time() {
      setInterval(() => {
        if(this.seconds <= 0) {
          this.seconds = 1800;
        }
        this.seconds -= 1
        this.countDown()
      }, 1000)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.onload();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.currentPage = val;
      this.onload();
    },
    isNotEmpty(arr) {
      return arr != null && arr.length !== 0
    },
    onSubmit() {
      this.page.currentPage=1
      this.onload();
    },

    onload(){
      this.isActive = true;
      pageQrPlayer(this.page.currentPage, this.page.pageSize, Object.assign(this.formInline)).then(res => {
        this.isActive = false;
        const data = res.data.data;
        console.log("res.data.data", res.data.data)
        this.page.total = data.total;
        this.tableData = data.records;
        this.loading = false;
      });

    },
    loadSyncTime(){
      getSyncTime().then(res =>{
        this.seconds = res.data;
        if(this.seconds > 0) {
          this.Time()
        }
      });
    },
    handleExport() {
      this.$confirm("是否导出回收监控数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        var forming={};
        forming = cloneObj(this.formInline)
        window.location.href = `/api/blade-details/spend/export-QrPlayer?blade-auth=${getToken()}&${parseParam(forming)}`;
      });
    },
    syncData() {
      this.$confirm("同步数据需要耗费点时间，确定要手动同步数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        initSyncData().then(res =>{
          this.$message({
            type: "success",
            message: "已开始同步数据，请几分钟后再刷新数据!"
          });
        });
      });
    }
  }
}

</script>

<style>
.customViewUser{
  width: 50%;
  background-color: #FFFFFF !important;
}
</style>
